<template>
  <div class="right_content">
    <div class="right_logo">
      <span class="logo_span"><img :src="mainRightModel.logo"></span>
      <span class="module_name">{{mainRightModel.name}}</span>
    </div>
    <!-- right_logo -->
    <div class="right_content_mid">
      <div class="right_content_mid_left">
        <h3>订单实际总共收入(万元)</h3>
        <p class="marginBtm50">{{ baseInfo.cffOrderAmount }}</p>
         <h3>总注册人数(人)</h3>
        <p class="marginBtm35">{{ baseInfo.cfregisterAmount }}</p>
      </div>
      <!-- right_content_mid_left -->
      <div class="right_content_mid_right">
        <span><line-bar :eData="echartsObj[0]"></line-bar></span>
        <span><line-bar :eData="echartsObj[1]"></line-bar></span>
      </div>
      <!-- right_content_mid_right -->
    </div>
    <!-- right_content_mid -->
    <div class="col_system">
      <div class="left_col_4">
        <span class="left_col_name">押金总额(万元)</span>
        <span class="left_col_count">{{baseInfo.cffDepositAmount}}</span>
      </div>
      <!-- left_col_4 -->
      <div class="left_col_4">
        <span class="left_col_name">本月下单人数(人)</span>
        <span class="left_col_count">{{baseInfo.cforderPersonNumber}}</span>
      </div>
      <!-- left_col_4 -->
      <div class="left_col_4">
        <span class="left_col_name">可使用车辆(辆)</span>
        <span class="left_col_count">{{baseInfo.cfavilableVehicleAmount}}</span>
      </div>
      <!-- left_col_4 -->
      <div class="left_col_4">
        <span class="left_col_name">在租车辆(辆)</span>
        <span class="left_col_count">{{baseInfo.cfrentVehicleAmount}}</span>
      </div>
      <!-- left_col_4 -->
    </div>
  </div>
  <!-- right_content -->
</template>

<script>
import LineBar from './bar/lineBar';

export default {
  props: {
    baseInfo: {
      type: Object,
      default: () => {
        return null
      }
    },
    mainRightModel: {
      type: Object,
      default: () => {
        return {
          msg: ''
        }
      }
    },
    echartsObj: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    LineBar
  },
  data () {
    return {
      msg: ''
    }
  }
}
</script>


<style lang="less" scoped>
  .right_content{
    background: #222943;
    border-radius: 10px;
    .right_logo{
      position: relative;
      padding-left: 1.12rem;
      width: auto;
      height: 0.98rem;
      .logo_span{
        position: absolute;
        top: 0.22rem;
        left: 0.44rem;
        z-index: 1;
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        img{
          display: block;
          width: 100%;
          height: auto;
        }
      }
      .module_name{
        display: block;
        font-size: 0.36rem;
        color: #fff;
        line-height: 0.98rem;
      }
    }
    .right_content_mid{
      width:  auto;
      height: 2.78rem;
      overflow: hidden;
      .right_content_mid_left{
        padding-left: 0.44rem;
        float: left;
        width: 3.04rem;
        height: auto;
        &>h3{
          color: #a5a6a4;
          font-size: 0.18rem;
          line-height: 0.62rem;
        }
        &>p{
          height: 0.36rem;
          color: #fff;
          font-size: 0.26rem;
          line-height: 0.36rem;
          font-weight: 400;
        }
        &>p.marginBtm50{
          margin-bottom: 0.5rem
        }
        &>p.marginBtm35{
          margin-bottom: 0.35rem
        }
      }
      .right_content_mid_right{
        float: right;
        width: 8.3rem;
        &>span{
          float: left;
          display: block;
          width: 4.1rem;
          height: auto;
          overflow: hidden;
        }
      }
    }
    .col_system{
      display: flex;
      display: -webkit-flex;
      overflow: hidden;
      height: 1.2rem;
      .left_col_4{
        padding-left: 0.44rem;
        .left_col_count{
          color: #fff;
        }
        flex-direction: row;
        flex-basis: 25%;
        align-content: flex-start;
        &>span{
          display: block;
          color: #a5a6a4;
        }
        &>span.left_col_name{
          font-size: 0.18rem;
          line-height: 0.62rem;
        }
        &>span.left_col_count{
          color: #fff;
          font-size: 0.26rem;
          line-height: 0.28rem;
          font-weight: 400;
        }
      }
    }
  }
</style>

